<style lang="sass" scoped> 
    .time_common{
        overflow: hidden;
        .item{
            display: inline-block;
            margin-right:10px;
            input{
                border-radius:3px;
            }
        }
    }
</style>
<template>
   <div class="time_common">
        <div class="item"><span v-if="datas.isShowTitle" v-text="datas.titleBeginText"></span><input :style="{'width':width+'px'}" :placeholder="datas.isShowPlaceholder?datas.titleBeginText:''" class="laydate-icon input-model" :id="datas.beginId" type="text"></div>
        <div v-if="!datas.isOneTime" class="item"><span v-if="datas.isShowTitle" v-text="datas.titleEndText"></span><input :style="{'width':width+'px'}" :placeholder="datas.isShowPlaceholder?datas.titleEndText:''" class="laydate-icon input-model" :id="datas.endId" type="text"></div>
   </div>
</template>
<script type="es6">
    /*
        十分重要： 此组件 如果一个人页面有多个时间选择器 则传入的开始时间名字跟 id 保持一致
    */
    import propsync from 'common/lib/mixin/propsync'
    export default{
        props:{
            datas:{
                type:Object,
                default:(()=>{
                    return {}
                }),
            },
            begin:{
                type:null,
                default:null,
            },
            end:{
                type:null,
                default:null,
            },
            width:{
                type:null,
                default:150,
            }
        },
        // mixins: [propsync],
        data(){
            return{
                // id:'',
                // beginid:'',
                // endid:''
            }
        },
        created(){
            var config={
                beginId:'begin',
                endId:'end',
                isOneTime:false, //是否只需要一个时间
                isShowPlaceholder:true,  //是否展示placeholder
                isShowTitle:false, //是否显示title
                titleBeginText:'开始时间：', //title 开始 文字
                titleEndText:'结束时间：', //title 结束 文字
                event: 'click', //触发事件
                format: 'YYYY/MM/DD', //日期格式
                istime: false, //是否开启时间选择
                isclear: true, //是否显示清空
                istoday: true, //是否显示今天
                issure: true, //是否显示确认
                festival: true, //是否显示节日
                min: '1900/01/01 00:00:00', //最小日期
                max: '2099/12/31 23:59:59', //最大日期
                start: laydate.now(),  //开始日期
                fixed: false, //是否固定在可视区域
                zIndex: 10000, //css z-index
                effectivetime:null,  //默认不限制范围 限制时传整数 例如:30  表示只能选择开始后的30天
                skin:'default',   //可选参数  default,dahong,danlan,molv
            };
            // 处理继承
            for(var i in config){
                if(!this.datas) return ;
                for(var k in this.datas){
                    if(i==k){
                        config[k]=this.datas[k]
                    }
                }
            }
            this.datas=config;
            // 处理时间格式
            if(this.datas.istime) this.datas.format='YYYY/MM/DD hh:mm:ss';
        },
        mounted() {
          this.$nextTick(()=>{
               // 起始时间如果有就先赋值
                if(this.begin){
                    if(this.datas.istime){ 
                        $('#'+this.datas.beginId).val(moment(this.begin).format('YYYY/MM/DD hh:mm:ss'));
                    }else{  
                        $('#'+this.datas.beginId).val(moment(this.begin).format('YYYY/MM/DD'));
                    }
                };
                if(!this.datas.isOneTime){
                    if(this.end){
                        if(this.datas.istime){   
                            $('#'+this.datas.endId).val(moment(this.end).format('YYYY/MM/DD hh:mm:ss'));
                        }else{
                            $('#'+this.datas.endId).val(moment(this.end).format('YYYY/MM/DD'));
                        }
                    }; 
                };
                switch(this.datas.skin){
                    case 'dahong':
                        require('common/lib/laydate/skins/dahong/laydate.css');
                        break;
                    case 'danlan':
                        require('common/lib/laydate/skins/danlan/laydate.css');
                        break;  
                    case 'molv':
                        require('common/lib/laydate/skins/molv/laydate.css');
                        break;     
                }
                //时间筛选器
                var begin={
                    elem: '#'+this.datas.beginId,
                    event: this.datas.event, //触发事件
                    format: this.datas.format, //日期格式
                    istime: this.datas.istime, //是否开启时间选择
                    isclear:this.datas.isclear,
                    istoday: this.datas.istoday, //是否显示今天
                    issure: this.datas.issure, //是否显示确认
                    festival: this.datas.festival, //是否显示节日
                    min: this.datas.min, //最小日期
                    max: this.datas.max, //最大日期
                    start: this.datas.start,  //开始日期
                    fixed: this.datas.fixed, //是否固定在可视区域
                    zIndex: this.datas.zIndex, //css z-index
                    choose:((data)=>{
                        this.$emit('update:begin',data?Date.parse(data):data);
                        // this.begin=data?Date.parse(data):data;
                        // this.$emit('onPropsChanges', this.beginid,data?Date.parse(data):data); 

                        if(!this.datas.isOneTime){
                            if(Date.parse(data)>this.end) {
                                // this.end="";
                                this.$emit('update:end','');
                                // this.$emit('onPropsChanges', this.endid, ''); 
                                $('#'+this.datas.endId).val(this.end);
                            }
                            end.min = data
                            end.start = data 
                            // 限制时间范围
                            if(this.datas.effectivetime){
                                var beginTimes=Date.parse(data);
                                var times = this.datas.effectivetime*24*3600000;
                                end.max=new Date(beginTimes+times).date('y/m/d');
                            };
                        };    
                    }),
                    // click:(data=>{
                    //     this.id=data
                    //     this.beginid=data;
                    // })
                };
                var end={
                    elem: '#'+this.datas.endId,
                    event: this.datas.event, //触发事件
                    format: this.datas.format, //日期格式
                    istime: this.datas.istime, //是否开启时间选择
                    isclear:this.datas.isclear,
                    istoday: this.datas.istoday, //是否显示今天
                    issure: this.datas.issure, //是否显示确认
                    festival: this.datas.festival, //是否显示节日
                    min: this.datas.min, //最小日期
                    max: this.datas.max, //最大日期
                    start: this.datas.start,  //开始日期
                    fixed: this.datas.fixed, //是否固定在可视区域
                    zIndex: this.datas.zIndex, //css z-index
                    choose:((data)=>{
                        // 如果没开启时间选择，才让结束时间加86399999毫秒(开始)
                        if(this.datas.istime){
                            this.$emit('update:end',data?(Date.parse(moment(data).toDate())):data);
                            // this.end=data?(Date.parse(moment(data).toDate())):data;
                            // this.$emit('onPropsChanges', this.endid,data?Date.parse(data):data); 
                        }else{
                            this.$emit('update:end',data?(Date.parse(moment(data).toDate())+86399999):data);
                            // this.end=data?(Date.parse(moment(data).toDate())+86399999):data;
                            // this.$emit('onPropsChanges', this.endid,data?(Date.parse(moment(data).toDate())+86399999):data); 
                        }
                        // 如果没开启时间选择，才让结束时间加86399999毫秒(结束)
                        if(this.end&&this.begin>this.end){
                            this.$emit('update:begin','');
                            // this.begin='';
                            // this.$emit('onPropsChanges', this.beginid, ''); 
                            // $('#'+this.datas.beginId).val(this.begin);
                        }
                    }),
                    // click:(data=>{
                    //     this.id=data
                    //     this.endid=data;
                    // })
                };
                laydate(begin)
                if(!this.datas.isOneTime){
                   laydate(end) 
               }; 
          })
        },
    }
</script>
<style>
   
</style>